<script>

export default {
  name: "Weather.vue",
  data() {
    return {
      weatherList: [
        {
          weather: "晴",
          icon: "el-icon-tianqi-qing"
        },
        {
          weather: "多云",
          icon: "el-icon-tianqi-duoyun"
        },
        {
          weather: "阴",
          icon: "el-icon-tianqi-yin"
        },
        {
          weather: "雨",
          icon: "el-icon-tianqi-yu"
        },
        {
          weather: "小雨",
          icon: "el-icon-tianqi-xiaoyu"
        },
        {
          weather: "小雨-中雨",
          icon: "el-icon-tianqi-xiaoyuzhuanzhongyu"
        },
        {
          weather: "中雨",
          icon: "el-icon-tianqi-zhongyu"
        },
        {
          weather: "中雨-大雨",
          icon: "el-icon-tianqi-zhongyuzhuandayu"
        },
        {
          weather: "大雨",
          icon: "el-icon-tianqi-dayu"
        },
        {
          weather: "大雨-特大雨",
          icon: "el-icon-tianqi-dayuzhuantedabaoyu"
        },
        {
          weather: "大雨-暴雨",
          icon: "el-icon-tianqi-dayuzhuanbaoyu"
        },
        {
          weather: "暴雨-大暴雨",
          icon: "el-icon-tianqi-baoyuzhuandabaoyu"
        },
        {
          weather: "暴雨",
          icon: "el-icon-tianqi-baoyu"
        },
        {
          weather: "大暴雨",
          icon: "el-icon-tianqi-dabaoyu"
        },
        {
          weather: "大雨-特大暴雨",
          icon: "el-icon-tianqi-dayuzhuantedabaoyu"
        },
        {
          weather: "特大暴雨",
          icon: "el-icon-tianqi-tedabaoyu"
        },
        {
          weather: "阵雨",
          icon: "el-icon-tianqi-zhenyu"
        },
        {
          weather: "雷阵雨",
          icon: "el-icon-tianqi-leizhenyu"
        },
        {
          weather: "冻雨",
          icon: "el-icon-tianqi-dongyu"
        },
        {
          weather: "雷雨冰雹",
          icon: "el-icon-tianqi-leiyubingbao"
        },
        {
          weather: "雨夹雪",
          icon: "el-icon-tianqi-yujiaxue"
        },
        {
          weather: "雪",
          icon: "el-icon-tianqi-xue"
        },
        {
          weather: "小雪",
          icon: "el-icon-tianqi-xiaoxue"
        },
        {
          weather: "小雪-中雪",
          icon: "el-icon-tianqi-xiaoxuezhuanzhongxue"
        },
        {
          weather: "中雪",
          icon: "el-icon-tianqi-zhongxue"
        },
        {
          weather: "中雪-大雪",
          icon: "el-icon-tianqi-zhongxuezhuandaxue"
        },
        {
          weather: "大雪",
          icon: "el-icon-tianqi-daxue"
        },
        {
          weather: "大雪-暴雪",
          icon: "el-icon-tianqi-daxuezhuanbaoxue"
        },
        {
          weather: "暴雪",
          icon: "el-icon-tianqi-baoxue"
        },
        {
          weather: "阵雪",
          icon: "el-icon-tianqi-zhenxue"
        },
        {
          weather: "扬沙",
          icon: "el-icon-tianqi-yangsha"
        },
        {
          weather: "霾",
          icon: "el-icon-tianqi-wumai"
        },
        {
          weather: "雾",
          icon: "el-icon-el-icon-tianqi-wu"
        },
        {
          weather: "沙尘暴",
          icon: "el-icon-tianqi-shachenbao"
        },
        {
          weather: "强沙尘暴",
          icon: "el-icon-tianqi-tedashachenbao"
        },
        {
          weather: "浮尘",
          icon: "el-icon-tianqi-fuchen"
        },
        {
          weather: "风向",
          icon: "el-icon-tianqi-fengxiang"
        },
        {
          weather: "风",
          icon: "el-icon-feng"
        },
        {
          weather: "其他",
          icon: "el-icon-qita"
        }
      ],
      weatherInfo: {
        adcode: null,
        city: null,
        humidity: null,
        info: null,
        province: null,
        reportTime: null,
        temperature: null,
        icon: null,
        weather: null,
        windDirection: null,
        windPower: null
      }
    }
  },
  mounted() {
    this.getCityPosition();
    console.log(this.weatherInfo);
  },
  methods: {
    getCityPosition() {
      let that = this;
      AMap.plugin('AMap.CitySearch', function () {
        let citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function (status, result) {
          console.log(status);
          if (status === 'complete' && result.info === 'OK') {
            that.getCityWeather(result.adcode);
          }
        })
      })
    },
    getCityWeather(adcode) {
      let that = this;
      AMap.plugin('AMap.Weather', function () {
        let weather = new AMap.Weather();
        weather.getLive(adcode, function (err, data) {
          if (data.info === 'OK') {
            that.weatherInfo = data;
            that.weatherInfo.temperature=that.weatherInfo.temperature+'°C';
            if(that.weatherList.some(item=>item.weather===that.weatherInfo.weather)){
            let index=that.weatherList.findIndex(item=>item.weather===that.weatherInfo.weather)
            that.weatherInfo.icon=that.weatherList[index].icon;
            return;
            }else{
              if(that.weatherInfo.weather[that.weatherInfo.weather.length-1]==='风'){
                that.weatherInfo.icon='el-icon-feng';
                return;
              }else if(that.weatherInfo.weather[that.weatherInfo.weather.length-1]==='霾'){
                that.weatherInfo.icon='el-icon-tianqi-wumai';
                return;
              }else if(that.weatherInfo.weather[that.weatherInfo.weather.length-1]==='雨'){
                that.weatherInfo.icon='el-icon-tianqi-yu';
                return;
              }else if(that.weatherInfo.weather[that.weatherInfo.weather.length-1]==='雪'){
                that.weatherInfo.icon='el-icon-tianqi-xue';
                return;
              }else if(that.weatherInfo.weather[that.weatherInfo.weather.length-1]==='雾'){
                that.weatherInfo.icon='el-icon-tianqi-wu';
                return;
              }
              that.weatherInfo.icon='el-icon-qita';
            }
          }
        });
      });
    }
  }
}
</script>

<template>
  <div v-if="weatherInfo" style="font-size: 15px;margin-right: 50px;text-align: center">
    <span>{{ weatherInfo.temperature }}</span>
    <span>{{ weatherInfo.city }}</span>
    <span>{{ weatherInfo.weather }}</span>
    <span :class="weatherInfo.icon" style="font-size: 24px;position: absolute;top: 18px"></span>
  </div>
</template>

<style scoped>
span {
  padding-right: 5px;
}
</style>
